import React from 'react'
import { connect } from 'dva';


export interface MyFormProps{
    name:string,
    age:number,
    signalrMsg:string[],
    editData: (payload:any)=>any
}

@connect(
    ({ person }) => ({ ...person }),
    {
        editData: (payload: any) => ({ type: "person/edit", payload })
    }
)
export default class MyForm extends React.PureComponent<MyFormProps> {

    getBindData(){
        let result:MyFormProps = {...this.props};
        if (!result.name) {
            result.name="未知";
        }
        if (!result.age) {
            result.age=0;
        }
        if(!result.signalrMsg){
            result.signalrMsg=["没有消息"];
        }
        return result
    }

    buttonClickHandler = () => {
        this.props.editData({
            name: "郝工",
            age: 30
        });
    }
    render() {
        let data = this.getBindData();
        return (
            <div style={{ backgroundColor: "lightpink" }}>
                <h3>MySubComp</h3>
                姓名：{data.name}<br />
                年龄：{data.age}<br />
                <span style={{color:"grey", fontStyle:"italic"}}>点按钮修改为一组值，按Ctrl+UP修改为另一组值</span><br />
                <button onClick={this.buttonClickHandler}>修改</button>
                <ol>
                    {this.props.signalrMsg.map(element =>
                        <li key={element}>{element}</li>
                    )}
                </ol>
            </div>
        )
    }
}
